<template>
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :type="type"
      :visible.sync="isVisible"
      :modal-append-to-body="false"
      :center="true"
      width="80%"
      top="50px"
      class="dialog-wrap"
    >
      <el-form class="dialog-from" :model="params" label-width="120px">
        <el-form-item label="名称">
          <el-input
            v-model="params.logisticsName"
            maxlength="20"
            :readonly="isDisabled"
            onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="params.logisticsName"
            maxlength="20"
            :readonly="isDisabled"
            onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
          />
        </el-form-item>
        
      </el-form>
      
      <div slot="footer" class="btn-wrap">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="isVisible = false">取消</el-button>
      </div>
      <el-dialog
        width="60%"
        title="选择配送区域"
        class="address-dialog"
        :visible.sync="areaVisible"
        append-to-body
      >
        <div class="area-dialog">
          <el-row>
            <template v-for="(province, index) in areaList">
              <el-col v-if="province.list.length > 0" :key="index" class="province-wrap" :span="8">
                <el-checkbox-group
                  v-model="province.selected"
                  @change="checkboxChange(province.keyId, province.selected)"
                >
                  <el-checkbox>{{ province.provinceName }}</el-checkbox>
                </el-checkbox-group>
                <el-cascader
                  v-model="province.selectCity"
                  :options="province.list"
                  :props="{
                    multiple: true,
                    children: 'list',
                    label: 'city',
                    value: 'city'
                  }"
                  collapse-tags
                  filterable
                  @change="changeCity(province)"
                />
              </el-col>
            </template>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="areaVisible = false">取 消</el-button>
          <el-button type="primary" @click="getSelectData">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </template>
  <script>
  // import Setting from "@/api/Setting";
  import { logisticsGetById, logisticsAdd, logisticsUpdate } from '@/api/shopSys'
  import areaJSON from '@/assets/area'
  
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'add'
      }
    },
    data() {
      return {
        sizeForm: {},
        headers: {
          Authorization: ''
        },
        dataObj: {
          folderId: 1
        },
        params: {
          logisticsName: '',
          chargeType: 1,
          charges: [
            {
              weight: '',
              price: '',
              secondWeight: '',
              secondPrice: '',
              regions: []
            }
          ]
        },
        selectArea: [],
        areaVisible: false,
        areaList: [],
        areaFilter: [],
        currentSelectCity: [],
        currentAreaIndex: 0,
        checkId: null
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      },
      isDisabled() {
        return this.type === 'check'
      },
      title() {
        const titleMap = {
          add: '新建',
          check: '查看',
          edit: '修改'
        }
        return titleMap[this.type]
      }
    },
    watch: {
      areaList: {
        handler() {
          // this.areaList.map(item => {
          //   const { selected, list } = item
          //   const allCity = list.map(cityItem => {
          //     const { city } = cityItem
          //     return city
          //   })
          //   if (selected) {
          //     this.selectArea = this.selectArea.concat(allCity)
          //   }
          // })
        },
        deep: true
      }
    },
    created() {
    },
    methods: {
      // 初始化地区
      initArea() {
        const { province_list, city_list } = areaJSON
        const provinceKeys = Object.keys(province_list)
        const cityKeys = Object.keys(city_list)
        this.areaList = provinceKeys.map(provinceKey => {
          provinceKey += ''
          let provinceList = []
          const provinceKeyId = provinceKey.slice(0, 2)
          const provinceName = province_list[provinceKey]
          let provinceSelected = false
          cityKeys.map(cityKey => {
            const cityKeyId = cityKey.slice(0, 2)
            const cityName = city_list[cityKey]
            if (
              provinceKeyId === cityKeyId &&
              this.areaFilter.indexOf(cityName) === -1
            ) {
              provinceList.push({
                id: cityKey,
                selected: false,
                city: cityName
              })
            }
          })
          // 回显
          let currentSelectCity = []
          if (this.currentSelectCity.indexOf(provinceName) > -1) {
            currentSelectCity = provinceList.map(cityItem => {
              return [cityItem.city]
            })
            provinceSelected = true
          } else {
            provinceList.map(cityItem => {
              if (this.currentSelectCity.indexOf(cityItem.city) > -1) {
                currentSelectCity.push([cityItem.city])
              }
            })
          }
          if (this.areaFilter.indexOf(provinceName) > -1) {
            provinceList = []
          }
          return {
            selectCity: currentSelectCity,
            keyId: provinceKeyId,
            selected: provinceSelected,
            provinceName: provinceName,
            list: provinceList
          }
        })
      },
      changeCity(item) {
        console.log(item, 'item')
        if (item.selectCity.length !== 0) {
          if (!item.selected) {
            item.selected = true
          }
        } else {
          item.selected = false
        }
      },
      // 全选省级
      checkboxChange(provincekeyId, selected) {
        this.areaList.map(item => {
          const { keyId, list } = item
          const allCity = list.map(cityItem => {
            const { city } = cityItem
            return [city]
          })
          if (keyId === provincekeyId && selected) {
            item.selectCity = allCity
          }
          if (keyId === provincekeyId && !selected) {
            item.selectCity = []
          }
          return item
        })
      },
      close() {
        this.$emit('close')
      },
      reset() {
        this.params = {
          logisticsName: '',
          chargeType: 1,
          chargingWay: 0,
          charges: [
            {
              weight: '',
              price: '',
              secondWeight: '',
              secondPrice: '',
              regions: []
            }
          ]
        }
      },
      // 添加地区
      addArea() {
        this.params.charges.push({
          weight: '',
          price: '',
          secondWeight: '',
          secondPrice: '',
          regions: []
        })
      },
      // 删除地区
      deleteLogistics(index) {
        console.log(this.params.charges)
        this.params.charges.splice(index, 1)
      },
      // 打开选择地区弹框
      openAreaDialog(index) {
        if (this.type === 'check') {
          return false
        }
        this.areaVisible = true
        this.currentAreaIndex = index
        // 获取已选择的城市
        this.areaFilter = []
        this.currentSelectCity = []
        this.params.charges.map((logisticsDetail, logisticsDetailIndex) => {
          // 获取其他可配送区域已选的城市
          const { regions } = logisticsDetail || ''
  
          if (index !== logisticsDetailIndex) {
            regions.map(region => {
              if (region.indexOf('-') > -1) {
                const regionSplit = region.split('-')
                const province = regionSplit[0]
                const citys = regionSplit[1] && regionSplit[1].split(',')
                if (province) {
                  if (citys) {
                    this.areaFilter = this.areaFilter.concat(citys)
                  }
                }
              } else {
                this.areaFilter.push(region)
              }
            })
          } else {
            regions.map(region => {
              if (region.indexOf(':') > -1) {
                const regionSplit = region.split(':')
                const province = regionSplit[0]
                const citys = regionSplit[1] && regionSplit[1].split(',')
                if (province) {
                  if (citys) {
                    this.currentSelectCity = this.currentSelectCity.concat(citys)
                  }
                }
              } else {
                this.currentSelectCity.push(region)
              }
            })
          }
        })
        this.initArea()
      },
      // 获取选择的地区
      getSelectedArea() {
        const selectAddressList = []
        this.areaList.map(areaItem => {
          const { selectCity, provinceName, list } = areaItem
          const citys = selectCity.map(city => {
            return city[0]
          })
          if (selectCity.length) {
            // 判断是否全选，全选就直接获取省级
            if (selectCity.length === list.length) {
              selectAddressList.push(provinceName)
            } else {
              const addressStr = provinceName + ':' + citys.toString()
              selectAddressList.push(addressStr)
            }
          }
        })
        return selectAddressList
      },
      getSelectData() {
        const selectedArea = this.getSelectedArea()
        this.params.charges[this.currentAreaIndex].regions = selectedArea
        this.areaVisible = false
      },
      // 查看详情
      async getDetails() {
        const res = await logisticsGetById({ logisticsId: this.checkId })
        if (res.code === '') {
          this.params = res.data
          // this.isVisible = false
          // this.$message({
          //   message: this.$t('tips.createSuccess'),
          //   type: 'success'
          // })
          // this.$emit('success')
        }
      },
      async onSubmit() {
        if (this.params.logisticsName === '') {
          this.$message.error('请输入方案名称')
        } else if (this.type === 'add') {
          this.add()
        } else if (this.type === 'edit') {
          this.update()
        } else {
          this.isVisible = false
        }
      },
      async add() {
        const res = await logisticsAdd(this.params)
        if (res.code === '') {
          this.isVisible = false
          this.$message({
            message: '成功添加',
            type: 'success'
          })
          this.$emit('success')
        }
      },
      async update() {
        const res = await logisticsUpdate(this.params)
        if (res.code === '') {
          this.isVisible = false
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.$emit('success')
        }
      },
      handleImageSuccess(response) {
        const { url } = response.data
        this.params.productImg = url
      },
      delectProductImg() {
        this.params.productImg = ''
      },
      setParams(val = {}) {
        if (val['params']) {
          this.params = val['params']
        }
        if (val['checkId']) {
          this.checkId = val['checkId']
          this.getDetails()
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .dialog-wrap {
    ::v-deep .el-dialog {
      display: flex;
      flex-direction: column;
      max-height: 80vh;
      max-width: 900px;
      overflow: hidden;
  
      .el-dialog__body {
        flex: 1;
        overflow: auto;
      }
    }
  
    .dialog-from {
      width: 80%;
      margin: auto;
    }
  
    .btn-wrap {
      margin: 45px auto 0;
      text-align: right;
    }
  
    .form-item-row {
      // padding-top: 40px;
      ::v-deep .el-input {
        width: 100px;
        margin: 0 5px;
      }
    }
  }
  
  .delivery-area-item {
    position: relative;
    padding: 10px 25px 10px 0;
    background-color: #f7f8fa;
    border-bottom: 2px solid #fff;
  
    .margin-bottom-0 {
      margin-bottom: 0px;
    }
  
    .delect-area {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      z-index: 999;
    }
  
    .add-area-btn {
      overflow: hidden;
      color: #409eff;
  
      &.disabled {
        color: #c0c4cc;
      }
    }
  }
  
  .delivery-area-btn {
    margin: 15px auto;
    text-align: center;
  }
  
  .address-dialog {
    .province-wrap {
      position: relative;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      // 重写el-cascader样式
      ::v-deep .el-cascader {
        width: 100% !important;
        line-height: normal;
  
        .el-input {
          cursor: pointer;
          width: 100% !important;
          height: 28px !important;
  
          span.el-input__suffix {
            position: inherit !important;
  
            i.el-input__icon {
              line-height: inherit;
              margin-left: 5px;
            }
          }
        }
  
        input,
        .el-cascader__tags {
          display: none !important;
        }
      }
    }
  }
  </style>
  